<template>
  <div class="u-clist couponList">
    <div>
      <div class="item" v-for="item in lists1" v-bind:key="item.id">
        <div class="flex">
          <div class="coupon-price selfCtenter">
            <p class="coupon-price-num">￥<span class="coupon-num">{{item.price}}</span></p>
            <p>{{item.type}}</p>
          </div>
          <div class="coupon-desc selfCtenter">
            <p class="title">{{item.title}}</p>
            <p>提示:{{item.notice}}</p>
            <p>有效期：{{item.endData}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="dashed"></div>

    <div>
      <div class="item" v-for="item in lists2" v-bind:key="item.id">
        <div class="nouse flex">
          <div class="outoudate"><img src="../../assets/couponuse.png"/></div>
          <div class="coupon-price selfCtenter">
            <p class="coupon-price-num">￥<span class="coupon-num">{{item.price}}</span></p>
            <p>{{item.type}}</p>
          </div>
          <div class="coupon-desc selfCtenter">
            <p class="title">{{item.title}}</p>
            <p>提示:{{item.notice}}</p>
            <p>有效期：{{item.endData}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {ctoast, confirmDialog} from '../../common/js/common'
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  export default ({
    data () {
      return {
        lists1: null,
        lists2: null
      }
    },
    created () {
      this.fetchData()
    },
    mounted () {

    },
    computed: {},
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      fetchData () {
        let result = HttpRequest(linklist.couponlist, {id: this.activityId})
        result.then((response) => {
          this.lists = response.body
          this.lists1 = this.lists.filter(item => {
            return item.used === 0
          })
          this.lists2 = this.lists.filter(item => {
            return item.used === 1
          })
        }, (response) => {

        }).catch((response) => {

        })
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "../userCenter/coupon.styl"
  .selfCtenter
    align-self center
</style>
